<template>
  <div>
    全选：<input type="checkbox" v-model="allCheck" @change="toggleall" />

    <hr />
    <ul>
      <li v-for="item in cart" :key="item.id">
        <input
          type="checkbox"
          :checked="item.isSelect"
          v-model="item.isSelect"
        />
        {{ item.name }} -- 单价 {{ item.price }} 购买数量:
        <input type="number" v-model="item.count" />
      </li>
    </ul>
    <p>总价：??</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cart: [
        { id: 1, name: "mac air", price: 6600, count: 1, isSelect: true },
        { id: 2, name: "iphone 13", price: 8000, count: 1, isSelect: true },
        { id: 3, name: "海尔冰箱", price: 6000, count: 1, isSelect: true },
      ],
      allCheck: false,
    };
  },
  methods: {
    toggleall() {
      this.cart.map((item) => (item.isSelect = this.allCheck));
    },
  },
  watch: {
    cart: {
      handler(newval) {
        this.allCheck = newval.every((item) => item.isSelect);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style>
li {
  list-style: none;
}
input {
  width: 50px;
}
</style>